<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>豆瓣</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <header class="header">
        <div class="container clearfix">
            <div class="logo left">
                <h1>
                    <a href="">
                        豆瓣
                    </a>
                </h1>
            </div>
            <div class="search left">
                <form>
                    <input type="text" class="txt" placeholder="电影、书籍、音乐">
                    <button>
                        <i class="iconfont iconxiazai17"></i>
                    </button>
                </form>
            </div>
            <nav class="menu right clearfix">
                <a href="" class="menu-read"></a>
                <a href="" class="menu-movie"></a>
                <a href="" class="menu-music"></a>
                <a href="" class="menu-group"></a>
                <a href="" class="menu-city"></a>
                <a href="" class="menu-fm"></a>
                <a href="" class="menu-time"></a>
                <a href="" class="menu-doupin"></a>
            </nav>
        </div>
    </header>

    <div class="banner">
        <div class="container clearfix">
            <iframe class="right loginarea" src="loginframe.html" frameborder="0"></iframe>
            <div class="slogan right">
                <h1 class="title">
                    豆瓣
                    <span>6.0</span>
                </h1>
                <div class="download">
                    <button class="btn">下载豆瓣 App</button>
                    <div class="qrcode">
                        <img src="img/icon-qr-small.png" alt="">
                        <div class="qrcode-img hidden">
                            <img src="img/qrcode.png" alt="">
                            <p>
                                iOS / Android 扫码直接下载
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主区域样式 -->
    <div>
        <!-- 热点 -->
        <div class="section">
            <div class="container clearfix">
                <div class="aside-right">
                    <div class="adv">
                        <a href="">
                            <img src="./img/adv1.jpg" alt="">
                        </a>
                    </div>
                    <div class="section-title">
                        <h2 class="title">热门话题</h2>
                        <span class="link">
                            <a href="">
                                去话题广场
                            </a>
                        </span>

                    </div>
                    <ul class="hot-list">
                        <li>
                            <div class="title">
                                <a href="" class="adv-tag">文学作品中最深刻的孤独描写
                                </a>
                            </div>
                            <div class="desc">
                                <span>379728人浏览</span>
                                <span>新话题</span>
                            </div>
                        </li>
                        <li>
                            <div class="title">
                                <a href="">文学作品中最深刻的孤独描写</a>
                            </div>
                            <div class="desc">
                                <span>379728人浏览</span>
                                <span>新话题</span>
                            </div>
                        </li>
                        <li>
                            <div class="title">
                                <a href="">文学作品中最深刻的孤独描写</a>
                            </div>
                            <div class="desc">
                                <span>379728人浏览</span>
                                <span>新话题</span>
                            </div>
                        </li>
                        <li>
                            <div class="title">
                                <a href="">文学作品中最深刻的孤独描写</a>
                            </div>
                            <div class="desc">
                                <span>379728人浏览</span>
                                <span>新话题</span>
                            </div>
                        </li>
                        <li>
                            <div class="title">
                                <a href="">文学作品中最深刻的孤独描写</a>
                            </div>
                            <div class="desc">
                                <span>379728人浏览</span>
                                <span>新话题</span>
                            </div>
                        </li>
                        <li>
                            <div class="title">
                                <a href="">文学作品中最深刻的孤独描写</a>
                            </div>
                            <div class="desc">
                                <span>379728人浏览</span>
                                <span>新话题</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="main">
                    <div class="section-title">
                        <h2 class="title">热点内容</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>

                    </div>
                    <div class="hot-main clearfix">
                        <div class="left">
                            <ul class=" item-list">
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover1.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                            Loremasdas asdfa sdfasdfasdfasdfasdfasdfa
                                        </a>
                                        <span>
                                            76张照片
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover1.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                            我们仍未知道那天所看见的论文的意义
                                        </a>
                                        <span>
                                            76张照片
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover1.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                            我们仍未知道那天所看见的论文的意义
                                        </a>
                                        <span>
                                            76张照片
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover1.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                            我们仍未知道那天所看见的论文的意义
                                        </a>
                                        <span>
                                            76张照片
                                        </span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="right">
                            <ul>
                                <li>
                                    <a href="">城市失忆症</a>
                                    <div class="title">
                                        泼萝的日记
                                    </div>
                                    <div class="desc">
                                        1. “我回到我的城市，熟悉如眼泪，如静脉，如童年的腮腺炎。” 1930年冬天的曼德...
                                    </div>
                                </li>
                                <li><a href="">Lorem ipsum dolor sit.</a></li>
                                <li><a href="">Culpa praesentium hic laboriosam?</a></li>
                                <li><a href="">Aliquid iusto excepturi fugit.</a></li>
                                <li><a href="">Eveniet impedit veritatis vitae.</a></li>
                                <li><a href="">Esse pariatur ipsum dicta?</a></li>
                                <li><a href="">Soluta et autem magnam.</a></li>
                                <li><a href="">Officia qui culpa excepturi.</a></li>
                                <li><a href="">Officiis nihil corporis accusamus?</a></li>
                                <li><a href="">Officia nobis sequi error.</a></li>
                                <li><a href="">Cupiditate eius consequatur harum!</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 豆瓣时间 -->
        <div class="section">
            <div class="container clearfix">
                <div class="aside-left">
                    <h2 class="title">
                        <a href="" class="dark-color">豆瓣时间</a>
                    </h2>
                </div>
                <div class="main">
                    <div class="section-title">
                        <h2 class="title">热门专栏</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>
                    <div class="time-main">
                        <ul class="item-list">
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>

        <!-- 视频 -->
        <div class="section">
            <div class="container clearfix">
                <div class="aside-left">
                    <div class="title">
                        <h2>
                            <a href="" class="dark-color">视频</a>
                        </h2>
                    </div>
                </div>
                <div class="main video-main">
                    <div class="section-title">
                        <a href="">
                            <h2 class="title">
                                瓣嘴
                            </h2>
                        </a>
                    </div>

                    <ul class="item-list">
                        <li>
                            <a href="">
                                <div class="img iconfont iconbofang">

                                    <img src="img/cover3.jpg" alt="">

                                </div>
                            </a>
                            <div class="words">
                                <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <div class="img iconfont iconbofang">

                                    <img src="img/cover3.jpg" alt="">

                                </div>
                            </a>
                            <div class="words">
                                <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <div class="img iconfont iconbofang">

                                    <img src="img/cover3.jpg" alt="">

                                </div>
                            </a>
                            <div class="words">
                                <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                            </div>
                        </li>
                    </ul>

                    <div class="section-title">
                        <a href="">
                            <h2 class="title">观影会客厅</h2>
                        </a>
                    </div>
                    <ul class="item-list">
                        <li>
                            <a href="">
                                <div class="img iconfont iconbofang">

                                    <img src="img/cover3.jpg" alt="">

                                </div>
                            </a>
                            <div class="words">
                                <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <div class="img iconfont iconbofang">

                                    <img src="img/cover3.jpg" alt="">

                                </div>
                            </a>
                            <div class="words">
                                <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <div class="img iconfont iconbofang">

                                    <img src="img/cover3.jpg" alt="">

                                </div>
                            </a>
                            <div class="words">
                                <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 电影 -->
        <div class="section">
            <div class="container clearfix movie-area">
                <div class="aside-left">
                    <div class="title">
                        <h2>
                            <a href="">电影</a>
                        </h2>
                    </div>

                    <nav class="left-menu">
                        <ul>
                            <li><a href="">影讯&购票</a></li>
                            <li><a href="" class="new">选电影</a></li>
                            <li><a href="">Eum.</a></li>
                            <li><a href="">Voluptatibus?</a></li>
                            <li><a href="" class="new">Commodi.</a></li>
                            <li><a href="">Facere!</a></li>
                            <li><a href="">Est!</a></li>
                            <li><a href="">Suscipit.</a></li>
                            <li><a href="">A.</a></li>
                            <li><a href="">Libero.</a></li>
                            <li><a href="">Dolore.</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="aside-right">
                    <div class="section-title">
                        <h2 class="title">影片分类</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>

                    <ul class="right-menu-list clearfix">
                        <li><a href="">爱情</a></li>
                        <li><a href="">喜剧</a></li>
                        <li><a href="">剧情</a></li>
                        <li><a href="">Lorem.</a></li>
                        <li><a href="">Cumque.</a></li>
                        <li><a href="">Velit.</a></li>
                        <li><a href="">Perspiciatis?</a></li>
                        <li><a href="">Eos.</a></li>
                        <li><a href="">Quidem.</a></li>
                        <li><a href="">Assumenda.</a></li>
                        <li><a href="">Soluta.</a></li>
                        <li><a href="">Voluptate?</a></li>
                        <li><a href="">Alias.</a></li>
                    </ul>

                    <div class="section-title">
                        <h2 class="title">近期热门</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>

                    <ul class="order-movie-list">
                        <li>
                            <a href="">风中有朵雨做的云</a>
                        </li>
                        <li>
                            <a href="">飞驰人生</a>
                        </li>
                        <li><a href="">Lorem, ipsum dolor.</a></li>
                        <li><a href="">Saepe, repellat pariatur!</a></li>
                        <li><a href="">Voluptate, perferendis enim.</a></li>
                        <li><a href="">Rem, qui officiis!</a></li>
                        <li><a href="">Sit, numquam mollitia.</a></li>
                        <li><a href="">Quisquam, aperiam id.</a></li>
                        <li><a href="">Laboriosam, consectetur cupiditate.</a></li>
                        <li><a href="">Maiores, fugiat vel!</a></li>
                    </ul>
                </div>
                <div class="main">
                    <div class="section-title">
                        <h2 class="title">正在热映</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>

                    <div>
                        <ul class="item-list">
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star50"></span>
                                    <span class="number">
                                        8.9
                                    </span>
                                </div>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star50"></span>
                                    <span class="number">
                                        8.9
                                    </span>
                                </div>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star50"></span>
                                    <span class="number">
                                        8.9
                                    </span>
                                </div>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star50"></span>
                                    <span class="number">
                                        8.9
                                    </span>
                                </div>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star50"></span>
                                    <span class="number">
                                        8.9
                                    </span>
                                </div>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star50"></span>
                                    <span class="number">
                                        8.9
                                    </span>
                                </div>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star50"></span>
                                    <span class="number">
                                        8.9
                                    </span>
                                </div>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star50"></span>
                                    <span class="number">
                                        8.9
                                    </span>
                                </div>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 小组 -->
        <div class="section">
            <div class="container group-area clearfix">
                <div class="aside-left">
                    <div class="title">
                        <h2>
                            <a href="">小组</a>
                        </h2>
                    </div>

                    <nav class="left-menu">
                        <ul>
                            <li><a href="">精选</a></li>
                            <li><a href="" class="new">文化</a></li>
                            <li><a href="">行摄</a></li>
                            <li><a href="">Voluptatibus?</a></li>
                            <li><a href="" class="new">Commodi.</a></li>
                            <li><a href="">Facere!</a></li>
                            <li><a href="">Est!</a></li>
                            <li><a href="">Suscipit.</a></li>
                            <li><a href="">A.</a></li>
                            <li><a href="">Libero.</a></li>
                            <li><a href="">Dolore.</a></li>
                        </ul>
                    </nav>
                </div>

                <div class="aside-right">
                    <div class="section-title">
                        <h2 class="title">小组分类</h2>
                    </div>

                    <div class="group">
                        <div class="group-name">
                            <a href="">兴趣</a>
                        </div>
                        <ul class="right-menu-list clearfix">
                            <li><a href="">旅行</a></li>
                            <li><a href="">摄影</a></li>
                            <li><a href="">影视</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Cumque.</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Perspiciatis?</a></li>
                            <li><a href="">Eos.</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Assumenda.</a></li>
                            <li><a href="">Soluta.</a></li>
                            <li><a href="">Voluptate?</a></li>
                            <li><a href="">Alias.</a></li>
                        </ul>
                    </div>
                    <div class="group">
                        <div class="group-name">
                            <a href="">兴趣</a>
                        </div>
                        <ul class="right-menu-list clearfix">
                            <li><a href="">旅行</a></li>
                            <li><a href="">摄影</a></li>
                            <li><a href="">影视</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Cumque.</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Perspiciatis?</a></li>
                            <li><a href="">Eos.</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Assumenda.</a></li>
                            <li><a href="">Soluta.</a></li>
                            <li><a href="">Voluptate?</a></li>
                            <li><a href="">Alias.</a></li>
                        </ul>
                    </div>
                    <div class="group">
                        <div class="group-name">
                            <a href="">兴趣</a>
                        </div>
                        <ul class="right-menu-list clearfix">
                            <li><a href="">旅行</a></li>
                            <li><a href="">摄影</a></li>
                            <li><a href="">影视</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Cumque.</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Perspiciatis?</a></li>
                            <li><a href="">Eos.</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Assumenda.</a></li>
                            <li><a href="">Soluta.</a></li>
                            <li><a href="">Voluptate?</a></li>
                            <li><a href="">Alias.</a></li>
                        </ul>
                    </div>
                    <div class="group">
                        <div class="group-name">
                            <a href="">兴趣</a>
                        </div>
                        <ul class="right-menu-list clearfix">
                            <li><a href="">旅行</a></li>
                            <li><a href="">摄影</a></li>
                            <li><a href="">影视</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Cumque.</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Perspiciatis?</a></li>
                            <li><a href="">Eos.</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Assumenda.</a></li>
                            <li><a href="">Soluta.</a></li>
                            <li><a href="">Voluptate?</a></li>
                            <li><a href="">Alias.</a></li>
                        </ul>
                    </div>
                </div>

                <div class="main">
                    <div class="section-title">
                        <h2 class="title">热门小组</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>

                    <ul class="item-list">
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover6.webp" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                <span>
                                    16265 个成员
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover6.webp" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                <span>
                                    16265 个成员
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover6.webp" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                <span>
                                    16265 个成员
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover6.webp" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                <span>
                                    16265 个成员
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover6.webp" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                <span>
                                    16265 个成员
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover6.webp" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                <span>
                                    16265 个成员
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover6.webp" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                <span>
                                    16265 个成员
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover6.webp" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                <span>
                                    16265 个成员
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover6.webp" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                <span>
                                    16265 个成员
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover6.webp" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                <span>
                                    16265 个成员
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 图书 -->
        <div class="section">
            <div class="container clearfix book-area">
                <div class="aside-left">
                    <div class="title">
                        <h2>
                            <a href="">读书</a>
                        </h2>
                    </div>

                    <nav class="left-menu">
                        <ul>
                            <li><a href="">分类浏览</a></li>
                            <li><a href="" class="new">阅读</a></li>
                            <li><a href="">作者</a></li>
                            <li><a href="">书评</a></li>
                        </ul>
                    </nav>

                    <div class="menu-adv">
                        <a href="">
                            <span class="app-icon-1"></span>
                        </a>
                        <a href="">
                            豆瓣阅读
                        </a>
                    </div>
                </div>

                <div class="aside-right">
                    <div class="section-title">
                        <h2 class="title">热门标签</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>

                    <div class="group">
                        <ul class="right-menu-list clearfix">
                            <li><span>[文学]</span></li>
                            <li><a href="">小说</a></li>
                            <li><a href="">随笔</a></li>
                            <li><a href="">日本文学</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Cumque.</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Perspiciatis?</a></li>
                            <li><a href="">Eos.</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Assumenda.</a></li>
                            <li><a href="">Soluta.</a></li>
                            <li><a href="">Voluptate?</a></li>
                            <li><a href="">Alias.</a></li>
                        </ul>
                    </div>
                    <div class="group">
                        <ul class="right-menu-list clearfix">
                            <li><span>[文学]</span></li>
                            <li><a href="">小说</a></li>
                            <li><a href="">随笔</a></li>
                            <li><a href="">日本文学</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Cumque.</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Perspiciatis?</a></li>
                            <li><a href="">Eos.</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Assumenda.</a></li>
                            <li><a href="">Soluta.</a></li>
                            <li><a href="">Voluptate?</a></li>
                            <li><a href="">Alias.</a></li>
                        </ul>
                    </div>
                    <div class="group">
                        <ul class="right-menu-list clearfix">
                            <li><span>[文学]</span></li>
                            <li><a href="">小说</a></li>
                            <li><a href="">随笔</a></li>
                            <li><a href="">日本文学</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Cumque.</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Perspiciatis?</a></li>
                            <li><a href="">Eos.</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Assumenda.</a></li>
                            <li><a href="">Soluta.</a></li>
                            <li><a href="">Voluptate?</a></li>
                            <li><a href="">Alias.</a></li>
                        </ul>
                    </div>
                    <div class="group">
                        <ul class="right-menu-list clearfix">
                            <li><span>[文学]</span></li>
                            <li><a href="">小说</a></li>
                            <li><a href="">随笔</a></li>
                            <li><a href="">日本文学</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Cumque.</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Perspiciatis?</a></li>
                            <li><a href="">Eos.</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Assumenda.</a></li>
                            <li><a href="">Soluta.</a></li>
                            <li><a href="">Voluptate?</a></li>
                            <li><a href="">Alias.</a></li>
                        </ul>
                    </div>
                </div>

                <div class="main">
                    <div class="section-title">
                        <h2 class="title">新书速递</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>
                    <ul class="item-list">
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover7.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">
                                    镀金时代
                                </a>
                                <span>
                                    夏清影
                                </span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover7.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">
                                    镀金时代
                                </a>
                                <span>
                                    夏清影
                                </span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover7.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">
                                    镀金时代
                                </a>
                                <span>
                                    夏清影
                                </span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover7.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">
                                    镀金时代
                                </a>
                                <span>
                                    夏清影
                                </span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                        </li>
                    </ul>

                    <div class="section-title">
                        <h2 class="title">原创数字作品</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>
                    <ul class="item-list">
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover7.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">
                                    镀金时代
                                </a>
                                <span>
                                    夏清影
                                </span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover7.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">
                                    镀金时代
                                </a>
                                <span>
                                    夏清影
                                </span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover7.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">
                                    镀金时代
                                </a>
                                <span>
                                    夏清影
                                </span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="img/cover7.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">
                                    镀金时代
                                </a>
                                <span>
                                    夏清影
                                </span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 音乐 -->
        <div class="section">
            <div class="container clearfix music-area">
                <div class="aside-left">
                    <div class="title">
                        <h2>
                            <a href="">音乐</a>
                        </h2>
                    </div>

                    <nav class="left-menu">
                        <ul>
                            <li><a href="">音乐人</a></li>
                            <li><a href="" class="new">专题</a></li>
                            <li><a href="">排行榜</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Similique.</a></li>
                            <li><a href="">Repellendus.</a></li>
                            <li><a href="">Excepturi!</a></li>
                            <li><a href="">Illum?</a></li>
                            <li><a href="">In.</a></li>
                            <li><a href="">Eaque.</a></li>
                            <li><a href="">Dicta.</a></li>
                            <li><a href="">Cum.</a></li>
                            <li><a href="">Cumque?</a></li>
                        </ul>
                    </nav>

                    <div class="menu-adv">
                        <a href="">
                            <span class="app-icon-2"></span>
                        </a>
                        <a href="">
                            豆瓣FM
                        </a>
                    </div>
                    <div class="menu-adv">
                        <a href="">
                            <span class="app-icon-3"></span>
                        </a>
                        <a href="">
                            豆瓣音乐人
                        </a>
                    </div>
                </div>
                <div class="aside-right">
                    <div class="section-title">
                        <h2 class="title">本周流行音乐人</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>

                    <ul class="music-player-list">
                        <li class="clearfix">
                            <span class="number left">1.</span>
                            <div class="player right">
                                <a href="">
                                    <div class="img left iconbofang1 iconfont">
                                        <img src="img/cover8.jpg" alt="">
                                    </div>
                                </a>
                                <div class="words left">
                                    <a href="">王敖（音乐人）</a>
                                    <span>流派: 世界音乐 World </span>
                                    <span>463人关注</span>
                                </div>
                            </div>
                        </li>
                        <li class="clearfix">
                            <span class="number left">1.</span>
                            <div class="player right">
                                <a href="">
                                    <div class="img left iconbofang1 iconfont">
                                        <img src="img/cover8.jpg" alt="">
                                    </div>
                                </a>
                                <div class="words left">
                                    <a href="">王敖（音乐人）</a>
                                    <span>流派: 世界音乐 World </span>
                                    <span>463人关注</span>
                                </div>
                            </div>
                        </li>
                        <li class="clearfix">
                            <span class="number left">1.</span>
                            <div class="player right">
                                <a href="">
                                    <div class="img left iconbofang1 iconfont">
                                        <img src="img/cover8.jpg" alt="">
                                    </div>
                                </a>
                                <div class="words left">
                                    <a href="">王敖（音乐人）</a>
                                    <span>流派: 世界音乐 World </span>
                                    <span>463人关注</span>
                                </div>
                            </div>
                        </li>
                        <li class="clearfix">
                            <span class="number left">1.</span>
                            <div class="player right">
                                <a href="">
                                    <div class="img left iconbofang1 iconfont">
                                        <img src="img/cover8.jpg" alt="">
                                    </div>
                                </a>
                                <div class="words left">
                                    <a href="">王敖（音乐人）</a>
                                    <span>流派: 世界音乐 World </span>
                                    <span>463人关注</span>
                                </div>
                            </div>
                        </li>
                        <li class="clearfix">
                            <span class="number left">1.</span>
                            <div class="player right">
                                <a href="">
                                    <div class="img left iconbofang1 iconfont">
                                        <img src="img/cover8.jpg" alt="">
                                    </div>
                                </a>
                                <div class="words left">
                                    <a href="">王敖（音乐人）</a>
                                    <span>流派: 世界音乐 World </span>
                                    <span>463人关注</span>
                                </div>
                            </div>
                        </li>
                        <li class="clearfix">
                            <span class="number left">1.</span>
                            <div class="player right">
                                <a href="">
                                    <div class="img left iconbofang1 iconfont">
                                        <img src="img/cover8.jpg" alt="">
                                    </div>
                                </a>
                                <div class="words left">
                                    <a href="">王敖（音乐人）</a>
                                    <span>流派: 世界音乐 World </span>
                                    <span>463人关注</span>
                                </div>
                            </div>
                        </li>
                        <li class="clearfix">
                            <span class="number left">1.</span>
                            <div class="player right">
                                <a href="">
                                    <div class="img left iconbofang1 iconfont">
                                        <img src="img/cover8.jpg" alt="">
                                    </div>
                                </a>
                                <div class="words left">
                                    <a href="">王敖（音乐人）</a>
                                    <span>流派: 世界音乐 World </span>
                                    <span>463人关注</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="main">
                    <div class="section-title">
                        <h2 class="title">豆瓣新碟榜</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>
                    <ul class="item-list">
                        <li>
                            <div class="img">
                                <a href=""><img src="img/cover9.jpg" alt=""></a>
                            </div>
                            <div class="words">
                                1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                            </div>
                            <div class="words">
                                <a href="">梁静茹</a>
                            </div>
                            <div class="star">
                                <span class="star-bg star50"></span>
                                <span class="number">
                                    8.9
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href=""><img src="img/cover9.jpg" alt=""></a>
                            </div>
                            <div class="words">
                                1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                            </div>
                            <div class="words">
                                <a href="">梁静茹</a>
                            </div>
                            <div class="star">
                                <span class="star-bg star50"></span>
                                <span class="number">
                                    8.9
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href=""><img src="img/cover9.jpg" alt=""></a>
                            </div>
                            <div class="words">
                                1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                            </div>
                            <div class="words">
                                <a href="">梁静茹</a>
                            </div>
                            <div class="star">
                                <span class="star-bg star50"></span>
                                <span class="number">
                                    8.9
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href=""><img src="img/cover9.jpg" alt=""></a>
                            </div>
                            <div class="words">
                                1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                            </div>
                            <div class="words">
                                <a href="">梁静茹</a>
                            </div>
                            <div class="star">
                                <span class="star-bg star50"></span>
                                <span class="number">
                                    8.9
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href=""><img src="img/cover9.jpg" alt=""></a>
                            </div>
                            <div class="words">
                                1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                            </div>
                            <div class="words">
                                <a href="">梁静茹</a>
                            </div>
                            <div class="star">
                                <span class="star-bg star50"></span>
                                <span class="number">
                                    8.9
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href=""><img src="img/cover9.jpg" alt=""></a>
                            </div>
                            <div class="words">
                                1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                            </div>
                            <div class="words">
                                <a href="">梁静茹</a>
                            </div>
                            <div class="star">
                                <span class="star-bg star50"></span>
                                <span class="number">
                                    8.9
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href=""><img src="img/cover9.jpg" alt=""></a>
                            </div>
                            <div class="words">
                                1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                            </div>
                            <div class="words">
                                <a href="">梁静茹</a>
                            </div>
                            <div class="star">
                                <span class="star-bg star50"></span>
                                <span class="number">
                                    8.9
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href=""><img src="img/cover9.jpg" alt=""></a>
                            </div>
                            <div class="words">
                                1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                            </div>
                            <div class="words">
                                <a href="">梁静茹</a>
                            </div>
                            <div class="star">
                                <span class="star-bg star50"></span>
                                <span class="number">
                                    8.9
                                </span>
                            </div>
                        </li>
                    </ul>
                    <div class="section-title">
                        <h2 class="title">热门歌单</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>
                    <ul class="item-list hot-music">
                        <li>
                            <a href="">
                                <div class="img iconfont iconbofang">
                                    <img src="img/cover10.jpg" alt="">
                                </div>
                            </a>
                            <div class="words">
                                LM-6.2014
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <div class="img iconfont iconbofang">
                                    <img src="img/cover10.jpg" alt="">
                                </div>
                            </a>
                            <div class="words">
                                LM-6.2014
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <div class="img iconfont iconbofang">
                                    <img src="img/cover10.jpg" alt="">
                                </div>
                            </a>
                            <div class="words">
                                LM-6.2014
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <div class="img iconfont iconbofang">
                                    <img src="img/cover10.jpg" alt="">
                                </div>
                            </a>
                            <div class="words">
                                LM-6.2014
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <div class="img iconfont iconbofang">
                                    <img src="img/cover10.jpg" alt="">
                                </div>
                            </a>
                            <div class="words">
                                LM-6.2014
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <div class="img iconfont iconbofang">
                                    <img src="img/cover10.jpg" alt="">
                                </div>
                            </a>
                            <div class="words">
                                LM-6.2014
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 豆品 -->
        <div class="section">
            <div class="container clearfix doupin-area">
                <div class="aside-left">
                    <div class="title">
                        <h2>
                            <a href="">豆品</a>
                        </h2>
                    </div>
                </div>
                <div class="aside-right">
                    <div class="section-title">
                        <h2 class="title">热门活动</h2>
                    </div>
                    <div class="adv">
                        <a href="">
                            <img src="./img/adv2.jpg" alt="">
                        </a>
                    </div>
                    <div>
                        <a href="">我的豆瓣收藏夹里有什么</a>
                    </div>
                    <div class="section-title">
                        <h2 class="title">官方小组</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>
                </div>
                <div class="main">
                    <div class="section-title">
                        <h2 class="title">热卖商品</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>
                    <ul class="item-list">
                        <li>
                            <div class="img">
                                <a href=""><img src="img/cover11.jpg" alt=""></a>
                            </div>
                            <div class="words clearfix">
                                <a href="" class="left">豆瓣冻顶乌龙茶</a>
                                <span class="right">￥59.00</span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href=""><img src="img/cover11.jpg" alt=""></a>
                            </div>
                            <div class="words clearfix">
                                <a href="" class="left">豆瓣冻顶乌龙茶</a>
                                <span class="right">￥59.00</span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href=""><img src="img/cover11.jpg" alt=""></a>
                            </div>
                            <div class="words clearfix">
                                <a href="" class="left">豆瓣冻顶乌龙茶</a>
                                <span class="right">￥59.00</span>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <a href=""><img src="img/cover11.jpg" alt=""></a>
                            </div>
                            <div class="words clearfix">
                                <a href="" class="left">豆瓣冻顶乌龙茶</a>
                                <span class="right">￥59.00</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 同城 -->
        <div class="section">
            <div class="container clearfix city-area">
                <div class="aside-left">
                    <div class="title">
                        <h2>
                            <a href="">同城</a>
                        </h2>
                    </div>

                    <nav class="left-menu">
                        <ul>
                            <li><a href="">近期活动</a></li>
                            <li><a href="" class="new">主办方</a></li>
                            <li><a href="">舞台剧</a></li>
                        </ul>
                    </nav>

                </div>
                <div class="aside-right">
                    <div class="section-title">
                        <h2 class="title">活动标签</h2>
                    </div>

                    <div class="group">
                        <div class="group-name">
                            <a href="">音乐</a>
                        </div>
                        <ul class="right-menu-list clearfix">
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Cumque.</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Perspiciatis?</a></li>
                            <li><a href="">Eos.</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Assumenda.</a></li>
                            <li><a href="">Soluta.</a></li>
                            <li><a href="">Voluptate?</a></li>
                            <li><a href="">Alias.</a></li>
                        </ul>
                    </div>
                    <div class="group">
                        <div class="group-name">
                            <a href="">音乐</a>
                        </div>
                        <ul class="right-menu-list clearfix">
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Cumque.</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Perspiciatis?</a></li>
                            <li><a href="">Eos.</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Assumenda.</a></li>
                            <li><a href="">Soluta.</a></li>
                            <li><a href="">Voluptate?</a></li>
                            <li><a href="">Alias.</a></li>
                        </ul>
                    </div>
                    <div class="group">
                        <div class="group-name">
                            <a href="">音乐</a>
                        </div>
                        <ul class="right-menu-list clearfix">
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Cumque.</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Perspiciatis?</a></li>
                            <li><a href="">Eos.</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Assumenda.</a></li>
                            <li><a href="">Soluta.</a></li>
                            <li><a href="">Voluptate?</a></li>
                            <li><a href="">Alias.</a></li>
                        </ul>
                    </div>
                    <div class="group">
                        <div class="group-name">
                            <a href="">音乐</a>
                        </div>
                        <ul class="right-menu-list clearfix">
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Cumque.</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Perspiciatis?</a></li>
                            <li><a href="">Eos.</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Assumenda.</a></li>
                            <li><a href="">Soluta.</a></li>
                            <li><a href="">Voluptate?</a></li>
                            <li><a href="">Alias.</a></li>
                        </ul>
                    </div>
                </div>
                <div class="main">
                    <div class="section-title">
                        <h2 class="title">成都 · 本周热门活动</h2>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>

                    <ul class="item-list">
                        <li class="clearfix">
                            <div class="img left">
                                <a href=""><img src="img/cover12.jpg" alt=""></a>
                            </div>
                            <div class="words">
                                <a href="">苏菲珊曼妮成都演唱会</a>
                                <span>5月31日 周五 19:30 - 21:30</span>
                                <span>特仑苏音乐厅 成都市锦江区...</span>
                                <span>80人关注</span>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="img left">
                                <a href=""><img src="img/cover12.jpg" alt=""></a>
                            </div>
                            <div class="words">
                                <a href="">苏菲珊曼妮成都演唱会</a>
                                <span>5月31日 周五 19:30 - 21:30</span>
                                <span>特仑苏音乐厅 成都市锦江区...</span>
                                <span>80人关注</span>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="img left">
                                <a href=""><img src="img/cover12.jpg" alt=""></a>
                            </div>
                            <div class="words">
                                <a href="">苏菲珊曼妮成都演唱会</a>
                                <span>5月31日 周五 19:30 - 21:30</span>
                                <span>特仑苏音乐厅 成都市锦江区...</span>
                                <span>80人关注</span>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="img left">
                                <a href=""><img src="img/cover12.jpg" alt=""></a>
                            </div>
                            <div class="words">
                                <a href="">苏菲珊曼妮成都演唱会</a>
                                <span>5月31日 周五 19:30 - 21:30</span>
                                <span>特仑苏音乐厅 成都市锦江区...</span>
                                <span>80人关注</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container clearfix">
            <div class="left">
                <p>© 2005－2019 douban.com, all rights reserved 北京豆网科技有限公司</p>
                <p><a href="">京ICP证090015号</a> 京ICP备11027288号 网络视听许可证<a href="">0110418</a>号 </p>
                <p>
                    京网文[2015]2026-368号 <img src="img/biaoshi.gif" alt=""> <a href="">京公网安备11010502000728</a> 新出网证(京)字129号
                </p>
                <p>
                    违法和不良信息举报电话：4008353331-9
                </p>
                <p>
                    <img src="img/jubao.png" alt=""> <a href="">中国互联网举报中心</a> 电话：12377 <a href="">新出发京批字第直160029号</a>
                </p>
            </div>
            <div class="right">
                <nav class="menu">
                    <a href="">关于豆瓣</a>
                    ·
                    <a href="">在豆瓣工作</a>
                    ·
                    <a href="">联系我们</a>
                    ·
                    <a href="">法律声明</a>
                    ·
                    <a href="">帮助中心</a>
                    ·
                    <a href="">移动应用</a>
                    ·
                    <a href="">豆瓣广告</a>
                </nav>
                <div class="adv">
                    <a href="">
                        <img src="img/adv3.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>